8/**
* @Author: zmx
* @Date: 2023/9/26
* @Description:
*/
<template>
  <el-dialog :title="'设备历史故障信息'" :visible.sync="show" append-to-body width="80%" :before-close="handleClose">
    <el-form :model="formInline" :inline="true">
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item label="设备名称：">
            <span>{{formInline.deviceName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item label="设备类型：">
            <span>{{formInline.deviceType}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7" :offset="1">
          <el-form-item label="故障名称">
            <el-input v-model="formSearch.faultName" placeholder="故障名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-form-item label="设备类型">
            <el-input v-model="formSearch.faultType" placeholder="设备类型"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">清空</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="7" :offset="1">
          <el-form-item label="故障等级">
            <el-input v-model="formSearch.faultValue" placeholder="故障等级"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-form-item label="故障开始时间">
            <el-date-picker
                v-model="formSearch.faultStartTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
                class="curveDate"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="faultName" label="故障名称"></el-table-column>
      <el-table-column prop="faultDisplay" label="故障现象"></el-table-column>
      <el-table-column prop="faultType" label="故障类型"></el-table-column>
      <el-table-column prop="faultValue" label="故障等级">
        <template v-slot="scope">
          <span v-if="scope.row.faultValue === 0">一级</span>
          <span v-if="scope.row.faultValue === 1">二级</span>
          <span v-if="scope.row.faultValue === 2">三级</span>
          <span v-if="scope.row.faultValue === 3">四级</span>
        </template>
      </el-table-column>
      <el-table-column prop="faultStartTime" label="故障开始时间" :formatter="formaTime"></el-table-column>
      <el-table-column prop="faultEndTime" label="故障结束时间" :formatter="formaTime"></el-table-column>
      <el-table-column prop="faultDurationTime" label="故障持续时间(小时)">
        <template v-slot="scope">
          {{(scope.row.faultDurationTime / 3600).toFixed(2)}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        hide-on-single-page
        style="text-align: center"
        :page-size="formSearch.pageSize"
        prev-text="上一页"
        next-text="下一页"
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page.sync="formSearch.pageNumber"
        :total="formInline.total">
    </el-pagination>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {formatDate} from "@/utils/DateFormat"
import {queryHistoryTreat} from "../../../../api/fault";

export default {
  props: ['ModelHistoryDialogShow', 'modelHistoryParam'], //接受父组件传递过来的数据
  data() {
    return {
      show: false, //弹窗默认隐藏
      formInline: {

      },
      formSearch: {
        pageNumber: 1,
        pageSize: 10
      },
      tableData: [],
      titleFront: '查看'
    };
  },
  mounted() {
    this.formInline = JSON.parse(JSON.stringify(this.modelHistoryParam))
    this.getInit()
    //显示弹窗
    if (this.formInline.type === 'add') {
      this.titleFront = '新建'
    } else if (this.formInline.type === 'edit') {
      this.titleFront = '编辑'
    }
    this.show = this.ModelHistoryDialogShow
  },
  methods: {
    formaTime(row, col) {
      return formatDate("YYYY-mm-dd HH:MM:SS", row[col.property])
    },
    formatTime(date) {
      return formatDate("YYYY-mm-dd HH:MM:SS", date)
    },
    handleClose() {
      //关闭弹窗
      this.show = false
      this.$emit('closeDialog')
    },
    checkBtn() {
      //确定按钮
      this.handleClose()
    },
    async getInit() {
      this.search()
    },
    search() {
      let params = {
        deviceId: this.formInline.deviceId,
        faultValue: this.formSearch.faultValue,
        faultName: this.formSearch.faultName,
        faultStartTime: this.formSearch.faultStartTime,
        faultType: this.formSearch.faultType
      }
      this.refreshPage(params)
    },
    reset() {
      this.formSearch = {
        pageSize: 20,
        pageNumber: 1
      }
    },
    refreshPage(params) {
      params.pageNumber = this.formSearch.pageNumber
      params.pageSize = this.formSearch.pageSize
      queryHistoryTreat(params).then((res) => {
        if (res) {
          this.tableData = res.data.list
          this.formInline.total = res.data.listSize
        }
      })
    },
    handleCurrentChange(val) {
      this.formSearch.pageNumber = val
      this.search()
    },
  }
};
</script>

<style scoped>

</style>
